<template>
    <div>
        <div class="swiper">
            <div class="swiper-wrapper">
                <div class="swiper-slide" v-for="(data,index) in datalist" :key="data" v-swiper="{
                    index:index,
                    length:datalist.length,
                }">{{ data }}</div>

            </div>
            <!-- 如果需要分页器 -->
            <div class="swiper-pagination"></div>

        </div>
    </div>
</template>
<script>
import Swiper from 'swiper/bundle';
import 'swiper/css/bundle';


export default {
    data() {
        return {
            datalist: [],
        }
    },
    directives: { //指令无法拿到组件的this 因为组件时一个对象,而指令是和dom联系的
        swiper: {
            mounted(el,obj) {
                console.log(obj.value);
                let { index, length } = obj.value;
                if (index === length - 1) {
                    console.log('最后一个节点');
                    var mySwiper = new Swiper('.swiper', {
                        loop: true, // 循环模式选项
                        // 如果需要分页器
                        pagination: {
                            el: '.swiper-pagination',
                        },
                        on: {
                            slideChange: function () {
                                console.log('改变了，activeIndex为' + this.activeIndex);
                            },
                        },
                    });
                }
            },
            updated() {
                
            },
        }
    },

    mounted() {
        setTimeout(() => {
            this.datalist = ['1111', '22222', '33333', '44444'];
        }, 2000);
    }
}
</script>

<style>
.swiper {
    height: 200px;
    color: red;
    background-color: rgb(246, 246, 246);
}
</style>